<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="carousel">
       

      
   </div>
   <div id="pagination"></div>
    <script>
        // 定义轮播图的图片元素
var imgArray = [
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg',
  'pexels-photo-17975892.jpeg'
];

// 定义当前显示的图片索引
var currentImg = 0;

// 定义轮播图的容器元素
var carousel = document.getElementById('carousel');

// 定义分页的按钮元素
var pagination = document.getElementById('pagination');

// 定义分页按钮的数量
var paginationCount = Math.ceil(imgArray.length / 3);

// 初始化分页按钮
for (var i = 0; i < paginationCount; i++) {
  var pageBtn = document.createElement('button');
  pageBtn.innerHTML = i + 1;
  pageBtn.addEventListener('click', function() {
    currentImg = (this.innerHTML - 1) * 3;
    updateCarousel();
  });
  pagination.appendChild(pageBtn);
}

// 更新轮播图
function updateCarousel() {
  carousel.innerHTML = '';
  for (var i = 0; i < 3; i++) {
    var img = document.createElement('img');
    img.src = imgArray[currentImg + i];
    carousel.appendChild(img);
  }
}

// 启动自动轮播
setInterval(updateCarousel, 3000);

// 更新分页按钮的状态
function updatePagination() {
  for (var i = 0; i < paginationCount; i++) {
    var pageBtn = pagination.children[i];
    pageBtn.classList.remove('active');
  }
  var activeBtn = pagination.children[currentImg / 3];
  activeBtn.classList.add('active');
}

// 初始轮播图和分页按钮
updateCarousel();
updatePagination();
    </script>
</body>
</html>